<template>
	<view>
		<!-- 分类 -->

		<!-- 总 -->
		<view class="main">
			<!-- 左侧tab -->
			<scroll-view scroll-y="true" class="u-tab-view" :style="{height: wh + 'px'}">
				<!-- 选中状态的类名是u-tab-item-active， -->
				<view :class="['u-tab-item',index === i ? 'u-tab-item-active':'']" v-for="(item,i) in navList" :key="i"
					@click="active(item,i)">
					{{item.name}}
				</view>
			</scroll-view>

			<!-- 右侧商品 -->
			<scroll-view scroll-y="true" class="right-goods-container " :style="{height: wh + 'px'}">
				<navigator class="goodsList" v-for="(item,i) in navList2" :key="i" @click="gotoGoodsSpxq(item)" url="">
					<view class="u-transition ">
						<view class="u-image">
							<!-- 图片字段是pic -->
							<image :src="item.pic" mode=""></image>
						</view>
					</view>
					<view class="goods-info">
						<view class="goods-title ">
							<!-- 标题字段是name -->
							<text>{{item.name}}</text>
						</view>
						<view class="t2">
							<!-- 已售字段是 numberSells-->
							已售：{{item.numberSells}}
						</view>
						<view class="price-score">
							<view class="item">
								<!-- 字段是minPrice -->
								<text>￥{{item.minPrice}}</text>
							</view>
						</view>
						<view class="addCar">
							<view class="u-icon" @click="gotoCart(item)">
								<uni-icons class="u-icon__icon" type="plus-filled" size="30">
								</uni-icons>
							</view>
						</view>
					</view>
				</navigator>

				<!-- 没有数据就显示 -->
				<view class=" noData" v-if="!navList2.length">
					<text>暂无数据</text>
				</view>
			</scroll-view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0,
                // 一级导航
				navList: [],
                // 二级导航
				navList2: [],
			};
		},
        onLoad() {
        	const sysInfo = uni.getSystemInfoSync()
        	this.wh = sysInfo.windowHeight
            // 一级导航调用
        	this.getNavList()
            // 二级导航调用
        	this.getNavList2()
        },
		methods: {
			// 左侧一级导航
			async getNavList() {
				const res = await uni.$http.get('/shop/goods/category/all');
				this.navList = res.data.data;
				this.id = this.navList[0].id;
			},
			// 右侧二级导航
			async getNavList2() {
				const res = await uni.$http.post('/shop/goods/list/v2?page=1&pageSize=100&categoryId=' + this.id);

				if (res.data.code === 0 || res.data.msg === 'success') return this.navList2 = res.data.data.result;
			},
			// 跳转到商品详情
			gotoGoodsSpxq(item) {
				uni.navigateTo({
					url: '/subpkg/goods_spxq/goods_spxq?id=' + item.id
				})
			},
			// 跳转到购物车
			gotoCart(item) {
				uni.switchTab({
					url: '/pages/cart/cart?id=' + item.id
				})
			},
			active(item, i) {
				this.id = item.id
				this.index = i;

				this.getNavList2()
			}
		}
	}
</script>

<style lang="scss">
	.main {
		flex: 1;
		overflow: hidden;
		display: flex;

		.u-tab-view {
			width: 180rpx;
			height: 100%;
			background-color: #f6f6f6;
			display: block;

			.u-tab-item {
				height: 110rpx;
				background: #f6f6f6;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				color: #444;
				font-weight: 400;
				line-height: 1;
			}

			.u-tab-item-active {
				position: relative;
				color: #000;
				font-size: 30rpx;
				font-weight: 600;
				background: #fff;

				&::before {
					content: "";
					position: absolute;
					border-left: 4px solid #e64340;
					height: 60rpx;
					left: 0;
					top: 25rpx;
					border-left-width: 4px;
					border-left-style: solid;
					border-left-color: rgb(230, 67, 64);
				}
			}
		}

		// 右侧商品列表
		.right-goods-container {
			flex: 1;
			height: 100%;
			display: block;
			width: 100%;

			.noData {
				text-align: center;
				padding-top: 300rpx;
				color: #666;
			}

			.goodsList {
				margin-bottom: 32rpx;
				padding: 0 8rpx;
				display: flex;

				.u-transition {
					width: 136px;
					height: 136px;
					border-radius: 9px;
					overflow: visible;
					background-color: transparent;
					position: relative;
					transition: opacity 0.5s ease-in-out;
					display: flex;
					flex-direction: column;
					flex-shrink: 0;
					flex-grow: 0;
					flex-basis: auto;
					align-items: stretch;
					align-content: flex-start;

					.u-image {
						width: 136px;
						height: 136px;
						border-radius: 9px;
						overflow: visible;
						background-color: transparent;
						position: relative;
						transition: opacity 0.5s ease-in-out;
						display: flex;
						flex-direction: column;
						flex-shrink: 0;
						flex-grow: 0;
						flex-basis: auto;
						align-items: stretch;
						align-content: flex-start;

						image {
							border-radius: 9px;
							width: 136px;
							height: 136px;
						}
					}
				}

				.goods-info {
					flex: 1;
					margin-left: 24rpx;
					position: relative;

					.goods-title {
						color: #333;
						font-size: 28rpx;
					}

					.t2 {
						color: #666;
						font-size: 26rpx;
					}

					.price-score {
						display: flex;
						color: #e64340;
						font-size: 38rpx;

						.item {
							padding: 0 8rpx;
							display: flex;
							align-items: center;

							text {
								padding: 0 4rpx;
								font-size: 28rpx;
							}
						}
					}

					.addCar {
						position: absolute;
						right: 24rpx;
						bottom: 16rpx;

						.u-icon {
							flex-direction: row;
							align-items: center;
							display: flex;
							flex-direction: column;
							flex-shrink: 0;
							flex-grow: 0;
							flex-basis: auto;
							align-items: stretch;
							align-content: flex-start;
							font-size: 27px;
							line-height: 27px;
							font-weight: normal;
							top: 0px;
							color: #e64340;

							.uniui-plus-filled:before {
								color: #e64340 !important;
							}

							.u-icon__icon {
								color: #e64340 !important;
								font-family: uicon-iconfont;
								position: relative;
								display: flex;
								flex-direction: row;
								align-items: center
							}
						}
					}
				}
			}
		}

	}
</style>
